<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="800px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="出租单号" prop="rentSn" label-width="100px">
            <el-input
              style="width: 300px;"
              v-model.trim="queryParams.rentSn"
              placeholder="请输入出租单号"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-divider></el-divider>

    <el-form ref="checkForm" :model="checkForm" v-show="info" :inline="true">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="检查单号" prop="checkSn" >
            <el-input v-model="checkForm.checkSn" readonly style="width: 250px;" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="出租单号" prop="rentSn">
            <el-input v-model="checkForm.rentSn" readonly style="width: 250px;" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="检查时间" prop="checkDate">
            <el-date-picker v-model="checkForm.checkDate"
                            type="datetime"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            style="width: 250px;"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="操作员名" prop="opername">
            <el-input v-model="checkForm.opername" readonly style="width: 250px;" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="存在问题" prop="problem">
            <el-input v-model="checkForm.problem" placeholder="请输入存在问题"  style="width: 250px;" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="赔付金额" prop="payMoney">
            <el-input v-model="checkForm.payMoney" placeholder="赔付金额"  style="width: 250px;" />
          </el-form-item>
        </el-col>

      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="问题描述" prop="checkDesc">
            <el-input
              style="width: 1200px;"
              type="textarea"
              :rows="3"
              placeholder="请输入内容"
              v-model="checkForm.checkDesc">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div style="text-align: center">
            <el-button type="primary" @click="submitForm">确 定</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>

    <el-divider></el-divider>

    <div v-show="info">

      <el-row :gutter="20">
        <el-col :span="8">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <h2>客户信息</h2>
              <p>客户姓名: {{ customer.customerName }}</p>
              <p>客户身份证: {{ customer.identity }}</p>
              <p>客户地址: {{ customer.address }} </p>
              <p>客户手机: {{ customer.phone }}</p>
              <p>客户职位: {{ customer.job }}</p>
            </div>
          </el-card>

        </el-col>
        <el-col :span="8">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <h2>车辆信息</h2>
              <p>车牌号: {{ car.carNumber }}</p>
              <p>品牌: {{ car.brand }}</p>
              <p>颜色: {{ car.color }}</p>
              <p>购买价格: {{ car.price }}</p>
            </div>
          </el-card>
        </el-col>

        <el-col :span="8">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <h2>出租信息</h2>
              <p>出租单号: {{ rent.rentSn }}</p>
              <p>开始时间: {{ rent.beginDate }}</p>
              <p>还车时间: {{ rent.returnDate }}</p>
              <p>租金: {{ rent.rentprice }}</p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import {checkRentSn,carBack} from "@/api/business/backCar";

export default {
  name: "BackCar",
  data() {
    return {
      // 显示搜索条件
      showSearch: true,
      queryParams: {
        rentSn: null
      },
      // 表单参数
      checkForm: {},
      car: {},
      customer: {},
      rent: {},
      info: false
    };
  },
  methods: {
    // 取消按钮
    cancel() {
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {};
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      // 发请求 校验这个出租单状态是否已经归还
      // 如果没归还
      // 展示表单和 下面信息
      checkRentSn(this.queryParams).then(res => {
        // 客户信息对象 车辆信息对象 租车对象    检查对象
        this.checkForm = res.data.check;
        this.car = res.data.car;
        this.customer = res.data.customer;

        this.rent = res.data.rent;
        this.info = true;
      })

    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
    },

    /** 提交按钮 */
    submitForm() {
      console.log(this.checkForm)
      carBack(this.checkForm).then(res=>{
        this.$message.success(res.msg);
        this.queryParams = {};
        this.info = false;
      })
    },

  }
};
</script>
